<!DOCTYPE html>
<html>
<head>
    <title>应用1</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="/javascripts/appConfig.js"></script>
    <script src="/javascripts/dragMsg.js"></script>
    <script>
    // 发送消息
    function sendMsg1() {
      dragMsg.sendMsg2Component({
        componentId: 'component1',
        content: '发送给component1的消息'
      })
    }

    function sendMsg2() {
      dragMsg.sendMsg2Component({
        componentId: 'component2',
        content: '发送给component2的消息'
      })
    }

    window.onload = function () {
      dragMsg.init(
        ['component1', 'component2'],
      )
    }
    </script>
</head>
<body style="height: 2000px">
<h1>App1页面</h1>
<div class="box" id="component1">
    <h3>拖拽按钮</h3>
    <iframe src="http://localhost:4001/component1" frameborder="1"></iframe>
</div>
<div class="box" id="component2">
    <h3>拖拽按钮</h3>
    <iframe src="http://localhost:4001/component2" frameborder="1"></iframe>
</div>
<button onclick="sendMsg1()">发送消息给组件component1</button>
<button onclick="sendMsg2()">发送消息给组件component2</button>
</body>
</html>
